<!DOCTYPE html>

<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
		<meta name="description" content="Simple and secure journal app" />

		<title>Mini Diary</title>

		<!-- CSS -->
		<link rel="stylesheet" type="text/css" href="styles/styles.css" />

		<!-- Favicons (created using RealFaviconGenerator) -->
		<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
		<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
		<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
		<link rel="manifest" href="/favicons/site.webmanifest" />
		<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#649ad8" />
		<link rel="shortcut icon" href="/favicons/favicon.ico" />
		<meta name="msapplication-TileColor" content="#649ad8" />
		<meta name="msapplication-config" content="/favicons/browserconfig.xml" />
		<meta name="theme-color" content="#649ad8" />

		<!-- Fathom Analytics -->
		<script>
			(function(f, a, t, h, o, m) {
				a[h] =
					a[h] ||
					function() {
						(a[h].q = a[h].q || []).push(arguments);
					};
				(o = f.createElement("script")), (m = f.getElementsByTagName("script")[0]);
				o.async = 1;
				o.src = t;
				o.id = "fathom-script";
				m.parentNode.insertBefore(o, m);
			})(document, window, "//analytics.samuelmeuli.com/tracker.js", "fathom");
			fathom("set", "siteId", "JHXPF");
			fathom("trackPageview");
		</script>
	</head>

	<body>
		<header>
			<img src="./img/app-icon.png" alt="App icon" width="150" />
			<h1>Mini Diary</h1>
			<p class="tagline">Simple and secure journal app</p>

			<div>
				<a class="button download" href="https://github.com/samuelmeuli/mini-diary/releases/latest">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="20"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						stroke-width="2"
						stroke-linecap="round"
						stroke-linejoin="round"
						class="feather feather-download"
					>
						<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
						<polyline points="7 10 12 15 17 10"></polyline>
						<line x1="12" y1="15" x2="12" y2="3"></line>
					</svg>
					Download
				</a>
			</div>
			<a
				id="all-platforms-link"
				class="small-text"
				href="https://github.com/samuelmeuli/mini-diary/releases/latest"
			>
				More download options
			</a>
		</header>

		<main>
			<section class="section-screenshots">
				<img
					src="./img/screenshot-1.png"
					alt="Screenshot of diary screen"
					class="screenshot screenshot-large"
				/>
			</section>

			<section class="section-highlights">
				<ul class="highlight-list centered">
					<li class="highlight">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="60"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							class="feather feather-smile"
						>
							<circle cx="12" cy="12" r="10"></circle>
							<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
							<line x1="9" y1="9" x2="9.01" y2="9"></line>
							<line x1="15" y1="9" x2="15.01" y2="9"></line>
						</svg>
						<div>
							<h2>Simple and intuitive</h2>
							<p>
								Mini Diary features a beautiful and clean design with no distractions, letting you
								fully focus on your writing.
							</p>
						</div>
					</li>
					<li class="highlight">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="60"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							class="feather feather-lock"
						>
							<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
							<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
						</svg>
						<div>
							<h2>Private and secure</h2>
							<p>
								You're in control of your data. The journal is encrypted with a password and stored
								locally on your device.
							</p>
						</div>
					</li>
					<li class="highlight">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="60"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							class="feather feather-save"
						>
							<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
							<polyline points="17 21 17 13 7 13 7 21"></polyline>
							<polyline points="7 3 7 8 15 8"></polyline>
						</svg>
						<div>
							<h2>Portable</h2>
							<p>
								Mini Diary makes it easy to import your existing journal from other apps or export
								your data in various file formats.
							</p>
						</div>
					</li>
					<li class="highlight">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="60"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
							class="feather feather-gift"
						>
							<polyline points="20 12 20 22 4 22 4 12"></polyline>
							<rect x="2" y="7" width="20" height="5"></rect>
							<line x1="12" y1="22" x2="12" y2="7"></line>
							<path d="M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z"></path>
							<path d="M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z"></path>
						</svg>
						<div>
							<h2>Completely free and open source</h2>
							<p>
								The app is and always will be free, and its source code can be viewed on
								<a href="https://github.com/samuelmeuli/mini-diary">GitHub</a>.
							</p>
						</div>
					</li>
				</ul>
			</section>

			<section class="section-screenshots">
				<img
					src="./img/screenshot-2.png"
					alt="Screenshot of lock screen"
					class="screenshot screenshot-small"
				/>
				<img
					src="./img/screenshot-3.png"
					alt="Screenshot of search"
					class="screenshot screenshot-small"
				/>
			</section>

			<section class="section-features centered">
				<h2>Features</h2>
				<ul class="feature-list">
					<li>Light and dark themes</li>
					<li>Encryption</li>
					<li>Basic text formatting</li>
					<li>Full-text search</li>
					<li>Localization in multiple languages</li>
					<li>Statistics</li>
					<li>Import from various apps and formats</li>
					<li>Export to various formats (PDF, Markdown, etc.)</li>
				</ul>
			</section>

			<section class="section-screenshots">
				<img
					src="./img/screenshot-4.png"
					alt="Screenshot of statistics screen"
					class="screenshot screenshot-large"
				/>
			</section>

			<section class="section-faq centered">
				<h2>FAQ</h2>
				<ul class="small-text">
					<li>
						<p class="faq-question">How can I change my password?</p>
						<p class="faq-answer">
							Unlock your diary and select Mini Diary → Preferences in the menu bar. You can edit
							your password here.
						</p>
					</li>
					<li>
						<p class="faq-question">I forgot my password. How can I reset it?</p>
						<p class="faq-answer">
							Your diary can only be read with your password, and resetting it isn't possible. This
							type of local encryption is what makes Mini Diary secure. It's therefore very
							important that you write down your password when creating a diary.
						</p>
					</li>
					<li>
						<p class="faq-question">How can I change where my diary is stored?</p>
						<p class="faq-answer">
							Unlock your diary and select Mini Diary → Preferences in the menu bar. You can change
							the location of your diary file here. (Please note that due to sandboxing, this option
							is not available in the Mac App Store version. You can download the
							<a class="download-mac">non-sandboxed version</a> to get this feature on macOS.)
						</p>
					</li>
					<li>
						<p class="faq-question">How can sync my diary with the cloud?</p>
						<p class="faq-answer">
							Mini Diary stores your journal in an encrypted file. If you change the location of
							that file to a cloud folder like Dropbox or Google Drive, it will automatically become
							accessible on all other devices with the same setup.
						</p>
					</li>
				</ul>
			</section>
		</main>

		<footer class="small-text">
			<ul>
				<li>
					<a href="https://samuelmeuli.com">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="20"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
						>
							<polyline points="16 18 22 12 16 6"></polyline>
							<polyline points="8 6 2 12 8 18"></polyline>
						</svg>
						Created by Samuel Meuli
					</a>
				</li>
				<li>
					<a href="https://github.com/samuelmeuli/mini-diary">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="20"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
						>
							<path
								d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
							></path>
						</svg>
						Source code on GitHub
					</a>
				</li>
				<li>
					<a href="https://github.com/samuelmeuli/mini-diary/blob/master/PRIVACY.md">
						<svg
							xmlns="http://www.w3.org/2000/svg"
							width="20"
							viewBox="0 0 24 24"
							fill="none"
							stroke="currentColor"
							stroke-width="2"
							stroke-linecap="round"
							stroke-linejoin="round"
						>
							<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
						</svg>
						Privacy policy
					</a>
				</li>
			</ul>
		</footer>

		<!-- Update download URLs -->
		<script src="./index.js"></script>
	</body>
</html>
